@import 'var.scss';
@import 'global.scss';

.play-list-slide-enter-active {
	transition: all 0.5s ease;
}

.play-list-slide-leave-active {
	transition: all 0.3s cubic-bezier(0.5, 0.3, 0.2, 0.5);
}

.play-list-slide-enter,
.play-list-slide-leave-to {
	opacity: 0;
	transform: translateY(30px);
}



.play-detail-slide-enter-active{

    transition: all  5s ease-out;
}
.play-detail-slide-leave-active{
    transition: all  0.8s cubic-bezier(0.5, 0.3, 0.2, 0.5);
}

.play-detail-slide-enter,
.play-detail-slide-leave-to {
    opacity: 0;
	transform: translateY(30px);
}




.play-list-wrap {
	height: 500px;
	width: 350px;
	//   border:$border;
	position: absolute;
	right: 0;
	top: -500px;
	background-color: red;
	.el-card {
		width: 100%;
        height: 100%;
        
        .card-header{
            display: flex;
            justify-content:space-between;
            i{
                cursor: pointer;
            }
        }
        .play-list-item-wrap{
            width: 100%;
            height: 400px;
            // border:$border;
            overflow-y:scroll;
            // -ms-overflow-style:none;
            // scrollbar-width: none;
            
        }
        ::-webkit-scrollbar {
            display: none;
        }
		.play-list-item {
			width: 100%;
            height: 35px;
            
			//   border: $border;
			display: flex;
			justify-content: space-between;
			align-items: center;
            cursor: pointer;
            .play-list-item-select-icon{
                height: 100%;
                width:5%;
                // border:$border;
                line-height: 35px;
                text-align: center;
            }
            .play-list-item-song-name{
                width:50%;
                height: 100%;
                line-height: 35px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                // border:$border;
            }
            .play-list-item-song-author{
                width:30%;
                height: 100%;
                line-height: 35px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                // border: $border;
            }
        }
        .play-list-item-select{
            color: red;
        }
		.play-list-item:nth-child(2n + 1) {
			background-color: rgb(255, 255, 255);
		}
		.play-list-item:nth-child(2n) {
			background-color: rgb(249, 249, 249);
		}
		.play-list-item:hover {
			background-color: rgb(244, 244, 244);
		}
	}
}
.drawer{
    position: absolute;
    bottom: 72px;
    // left: 0;
    border: $border;
    height: 90vh;
    width: 100%;
    background-color: rgb(246, 246, 246);
    display:flex;

    .drawer-top{
        width: 100%;
        height: 500px;
        display: flex;
        border: $border;
        padding-top: 50px;
        .song-cover{

            width:300px;
            height: 300px;
            border:$border;
            box-sizing: border-box;
            .el-image{
    
                width:300px;
                height: 300px;
    
            }
        }
        .song-cover::after{
            content: '';
            width: 300px;
            height: 300px;
            z-index: 1;
            position: absolute;
            left: 0;
            border-radius:50%;
            box-shadow: 0 0 20px  #141414;
            overflow: hidden;
            top: 50px;
            background: transparent url('http://image-yunsheng.test.upcdn.net/typora-cloud-img/raw/master/202206121808982.png') center no-repeat;
        }
        .lyric-wrap{
    
            flex: 1;
            border: $border;
            
    
        }

    }
    
}
.player-bar {
    width: 100%;
    
	min-width: 800px;
    max-width: 1200px;
    
	height: 72px;
	position: fixed;
    z-index: 999;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;

	border-top: 1px solid rgb(194, 182, 182);
	// border: $border;
	background-color: rgb(246, 246, 246);
	display: flex;
	.container {
		width: 100%;
		height: 100%;
		padding-left: 10px;
		padding-right: 10px;
		// border:1px solid black;
        display: flex;
        // overflow: auto;
		.left {
			width: 25%;
			height: 100%;
			// border: 1px solid blue;
			display: flex;
			align-items: center;

			.avater {
				width: 50px;
				height: 50px;
				// border: $border;
				border-radius: 10px;
                overflow: hidden;
                cursor: pointer;
			}
			.left-info {
				flex: 1;
				height: 50px;
				box-sizing: border-box;
				// border: $border;
				p {
					box-sizing: border-box;
					height: 25px;
					padding-left: 10px;
					margin: 0;
					// border: $border;
				}
				p:first-child {
					font-weight: 600;
				}
			}
		}
		.center {
			width: 50%;
			height: 100%;
			// border:1px solid red;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			.control-btn-wrap {
				height: 70%;
				width: 40%;
				text-align: center;
				// border: $border;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.backward {
					font-size: 20px;
					cursor: pointer;
				}
				.backward:hover {
					color: red;
				}
				.forward {
					font-size: 20px;
					cursor: pointer;
				}
				.forward:hover {
					color: red;
				}
				.control {
					color: red;
					font-size: 45px;
					cursor: pointer;
				}
			}
			.progress-bar {
				height: 30%;
				width: 100%;
				// border:$border;
				display: flex;
				justify-content: space-around;
				.el-slider {
					width: 80%;
					--el-slider-main-bg-color: red;
					--el-slider-button-size: 15px;

					// border:1px solid red;
				}
			}
		}
		.right {
			width: 25%;
			height: 100px;
			box-sizing: border-box;
			.right-btn-wrap {
				// box-sizing: border-box;
				height: 100%;
				width: 100%;
				// border: 1px solid black;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.voice-wrap {
					padding: 0;
					margin: 10px;
					flex: 1;
					// border: 1px solid red;
					transform: translate(0, -50%);
					display: flex;
					align-items: center;
					.el-slider {
						--el-slider-main-bg-color: red;
						--el-slider-button-size: 10px;
					}
				}
				.tools-wrap {
					padding: 0;
					margin: 0;
					// flex: 1;
					// border: 1px solid red;
					transform: translate(0, -50%);
				}
				i {
					margin-right: 15px;
					cursor: pointer;
					width: 25px;
					height: 25px;
					// border:1px solid red;
				}
			}
        }
        
    }
    
}
